
<template>
  <div class="hello">
    <div v-for="item in testArr">{{item}}</div>
    <h1 style="color: #ffffff">{{type}}</h1>
    <div class="container" style="width: 100%;height: 400px;background: #2ab27b;position: relative;overflow: hidden">
      <v-touch  style="position: relative;width: 100%;height: 354px;background:#ffffff; overflow: hidden" ref="wrapper"  v-on:panstart="pinch" v-on:panmove="pinch"  v-on:pinchin="pinch" v-on:pinchstart="pinch" v-on:pinchout="pinch" v-on:swiperight="swiperight" v-on:pinch class="wrapper">
        <div class="menu-container" ref="menu-container" style="background: #7e8c8d"
             :style="{width: 200 +'px',height: 200 +'px'}"
        >
          <!-- 这个是内容 -->
        </div>
      </v-touch>
    </div>
    <h1>{{ msg }}</h1>
    <h1>{{height}}</h1>

  </div>
</template>

<script>
  let minHeight=''
  let maxHeight = ''
  let startX=''
  let startY=''
  let beforeX=''
  let beforeY=''
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        height:'',
        type:'11111',
        testArr:['1','2','3','4'],
        x:0,

      }
    },
    mounted(){
      minHeight = this.$refs['menu-container'].clientHeight
      maxHeight = 2*minHeight
      console.log(document.getElementsByClassName('wrapper')[0])
    },
    methods:{
      vueTouch:function(txt,e){
        alert(txt);
      },
      tap(s,e){
        // alert("触摸点击");
      },
      swipeleft(s,e){
        // alert("向左滑动:x偏移量["+s.deltaX+"],y偏移量["+s.deltaY+"]");
      },
      swiperight(s,e){
        // alert("向右滑动:x偏移量["+s.deltaX+"],y偏移量["+s.deltaY+"]");
      },
      press(s,e){
        alert("长按")
      },
      pinch(e){
        this.msg=e
        this.type=e.type
        this.x=e.deltaX

        let ratio =  this.$refs['menu-container'].clientWidth/this.$refs['menu-container'].clientHeight
        if(e.type==='panstart'){
          // startX

          console.log(e)
        }
        if(e.type==='panmove'){
          beforeX= parseInt( document.getElementsByClassName('wrapper')[0].style.left)
          beforeY= parseInt( document.getElementsByClassName('wrapper')[0].style.top)
          console.log(beforeX)
          document.getElementsByClassName('wrapper')[0].style.top =e.center.y-(this.$refs['menu-container'].clientHeight)/2+'px'
          document.getElementsByClassName('wrapper')[0].style.left=e.center.x-(this.$refs['menu-container'].clientWidth)/2+'px'
          console.log(document.getElementsByClassName('wrapper')[0])
          // console.log(document.getElementsByClassName('wrapper')[0])
        }else if(e.type==='pinchin'){
          if(minHeight<=this.$refs['menu-container'].clientHeight){
            this.$refs['menu-container'].style.height=this.$refs['menu-container'].clientHeight - Math.abs(e.deltaY)+'px'
            this.$refs['menu-container'].style.width=this.$refs['menu-container'].clientHeight*ratio+'px'
          }
        }else if(e.type==='pinchout'){
          this.type=(maxHeight>=this.$refs['menu-container'].clientHeight)
          console.log()
          if(maxHeight>=this.$refs['menu-container'].clientHeight){
            this.$refs['menu-container'].style.height=this.$refs['menu-container'].clientHeight +Math.abs(e.deltaY)+'px'
            this.$refs['menu-container'].style.width=this.$refs['menu-container'].clientHeight*ratio+'px'
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .hello
    height 100%
    background #449fdb
    overflow auto
</style>
